<template>
  <div>
    app根组件
    <hr />
    <!--自定义事件都是v+指令名-->
    <button v-event="233">触发器</button>
    <br />
    <h1 v-edit="'自定义事件h1标签'">h1标签</h1>
    <hr />
    <img
      v-errorImg="img"
      src="http://ajax-api.itheima.net/images/4.webp33"
      alt=""
    />
  </div>
</template>
<script>

// import axios from 'axios';
import newImg from './assets/logo.png'
export default {
  name: '',
  data () {
    return {
      img: newImg
    }
  },
  //局部注册自定义指令
  directives: {
    edit: {
      inserted (ele, obj) {
        //类似ref获取dom元素
        console.log(ele, obj);
        ele.innerHTML = obj.value
      }
    },
    errorImg: {
      inserted (ele, obj) {
        //监听图片,如果加载失败,用绑定的value值替换原数据
        ele.addEventListener('error', function () {
          ele.src = obj.value
        })
        // ele.onerror = function () {
        //   ele.src = obj.value
        // }
      }
    }
  },
  created () {
    this.senddata()
  },
  computed: {
  },
  methods: {
    async senddata () {
      const res = await this.$axios('http://hmajax.itheima.net/api/news')
      console.log(res);
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
